// 产品列表
<template>
  <div class="container">
    <nav-login></nav-login>
    <home-seach></home-seach>
    <goods-nav></goods-nav>
    <div class="w1200">
      <div class="detailsRight">
        <div class="w972">
          <navigation-record></navigation-record>
          <div class="classify">
            <div class="brand">
              <div>
                <span>品牌</span>
                <el-button
                  size="mini"
                  type="primary "
                  @click="clearbrandlist"
                  plain
                  style="height:28px;margin-top:5px"
                >清空筛选</el-button>
              </div>
              <ul>
                <li v-for="item in brands" :key="item.code">
                  <el-button
                    size="mini"
                    type="text"
                    @click="brandbtn(item.code)"
                    :class="active2 == item.code ? 'active2' : '' "
                  >
                    <span style="margin:0 10px">{{item.brand_title}}</span>
                  </el-button>
                </li>
              </ul>
            </div>
          </div>
          <div class="seachdetail">
            <div class="seachdetail-left">
              <div class="seachdetail-left-title">
                <span>规格</span>
                <el-button size="mini" type="primary " plain @click="clearlist">清空筛选</el-button>
              </div>
              <div class="seachdetail-left-list">
                <el-collapse v-model="activeNames">
                  <el-collapse-item :title="i.name" :name="i.code" v-for=" i in skus" :key="i.code">
                    <el-checkbox-group v-model="checkList">
                      <el-checkbox
                        :label="check.name"
                        v-for="check in i.sku"
                        :key="check.code"
                        @change="changecheck(i.name,i.sku)"
                      >{{check.name}}</el-checkbox>
                    </el-checkbox-group>
                  </el-collapse-item>
                </el-collapse>
              </div>
            </div>

            <div class="seachdetail-right">
              <div class="seachdetail-right-top">
                <div>
                  <el-button type="primary" size="mini" icon="el-icon-menu" plain>综合排序</el-button>
                  <el-button type="primary" size="mini" @click="clear" plain>清除全部筛选</el-button>
                </div>

                <div>
                  <el-button
                    type="primary"
                    size="mini"
                    icon="el-icon-s-unfold"
                    plain
                    @click="listshow = true"
                  >列表</el-button>
                  <el-button
                    type="primary"
                    size="mini"
                    icon="el-icon-menu"
                    @click="listshow = false"
                    plain
                  >大图</el-button>
                  <span>
                    共
                    <i style="color:#409eff;margin:0 5px">{{this.total}}</i>件商品
                  </span>
                </div>
              </div>

              <ol v-if="goodsList.length" v-show="listshow == false">
                <li v-for="item in goodsList" :key="item.id">
                  <router-link
                    target="_blank"
                    :key="item.id"
                    class="goods"
                    :to="{
                name:'productDetails',
                params:{
                  id:item.id,
                  pid:item.goods_id,
                  item:item
                }, 
                query:{
                  id:item.id,
                  pid:item.goods_id,
                  item:item
                }
              }"
                  >
                    <img v-lazyload="item.goods_logo" src="@/assets/logo/loading.png" />
                    <!-- <img :src="item.goods_logo"> -->
                    <el-tooltip
                      class="item"
                      effect="light"
                      :content="item.goods_title"
                      placement="top-start"
                    >
                      <p>{{ item.goods_title }}</p>
                    </el-tooltip>
                    <!-- <p>{{ item.goods_title }}</p> -->
                    <div>
                      <span>￥{{ item.selling_price }}</span>
                      <del>￥{{ item.market_price }}</del>
                    </div>
                    <bdi>{{item.norm_name}}</bdi>
                  </router-link>
                </li>
              </ol>

              <el-table
                :data="goodsList"
                style="width: 100%  "
                :header-cell-style="{background:'#F5F7FA',color:'#606266',fontWeight:'800'}"
                @row-click="clickbtn"
                v-if="goodsList.length"
                v-show="listshow == true"
              >
                <el-table-column prop="goods_logo" label="图片" width="70" align="center">
                  <template slot-scope="scope">
                    <img :src="scope.row.goods_logo" width="60" height="60" />
                  </template>
                </el-table-column>
                <el-table-column prop="goods_title" label="名称" width="400" align="center"></el-table-column>
                <!-- <el-table-column prop="brand" label="品牌" width="100" align="center"></el-table-column> -->
                <el-table-column prop="norm_name" label="状态" width="250" align="center"></el-table-column>
                <!-- <el-table-column prop="specs" label="规格" align="center"></el-table-column>  -->
                <el-table-column prop="goods_stock" label="库存" width="100" align="center"></el-table-column>
                <el-table-column prop="selling_price" label="价格" align="center">
                  <template slot-scope="scope">
                    <div style="color:red">{{"￥"+`${scope.row.selling_price}`}}</div>
                  </template>
                </el-table-column>
              </el-table>
              <no-data v-else msg="暂无相关商品..." style="min-height:1380px;" />

              <el-pagination
                v-if="goodsList.length "
                background
                layout="prev, pager, next"
                :total="total"
                :page-size="pageSize"
                :current-page="currentPage"
                @current-change="currentChange"
              ></el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>

    <bottom-nav></bottom-nav>
    <home-footer></home-footer>
  </div>
</template>
<script>
import navigationRecord from "./components/NavigationRecord"; // 首页上面的 商品导航 标记在哪里点击进来的
export default {
  name: "productList",

  data() {
    return {
      activeNames: null,
      brands: [],
      skus: [],
      goodsList: [],
      total: 0,
      pageSize: 20, // 每一页个数
      currentPage: 1,
      listshow: true,

      active2: null,
      checkList: [],
      checkname: [],
      changeitem: {},
      param: null,
      checkLists: [],
      getarr: [],
      getname: ""
    };
  },

  methods: {
    clickbtn(row, column, event) {
      this.$store.commit("HandleNodeClick", row.goods_title);
      console.log(this.$store.state.HandleNodeClick);
      console.log(row.id, column, event);
      let id = row.id;
      let item = row;
      let routeUrl = this.$router.resolve({
        path: "/productDetails/" + `${id}`,
        query: {
          id,
          item
        }
      });
      window.open(routeUrl.href, "_blank");
    },
    // 分页  缺少总页数 ----
    async currentChange(current) {
      console.log(current);
      console.log(this.checkList);

      if (this.active2 !== null) {
        console.log("品牌不为空");
        this.brandbtn(this.changeitem, current);
      } else if (this.checkList.length > 0) {
        console.log("规格不为空");
        this.changecheck(this.getname, this.getarr, current);
      } else {
        console.log("全部为空");
        this.goodsListInit(current);
      }
    },

    //选择品牌
    brandbtn(item, page = 1) {
      (this.changeitem = item), console.log(item);
      this.active2 = item;
      let brand_code = this.changeitem;
      let id = this.$route.params.id;

      const res = this.$http({
        method: "post",
        url: "/api/index/api/GoodsByBrandAndSpec",
        data: {
          page,
          id,
          brand_code,
          param: this.checkLists.length ? this.checkLists : null
        }
      }).then(res => {
        console.log(res.data);
        let goodsList = [];

        this.goodsList = res.data.data;
        this.total = res.data.total; // 总页数
        this.pageSize = res.data.per_page; // 每页显示数目
        this.currentPage = res.data.current_page;
      });
    },

    // 获取商品列表
    async goodsListInit(page = 1) {
      console.log(page);
      let id = this.$route.params.id;
      let myGoodsList = await this.$http({
        method: "get",
        url: "/api/index/api/goodsByCateId",
        params: {
          id,
          page
        }
      });
      console.log(myGoodsList.data);
      if (myGoodsList.data.State.Code == 200) {
        this.goodsList = myGoodsList.data.data;
        this.total = myGoodsList.data.total; // 总页数
        this.pageSize = myGoodsList.data.per_page; // 每页显示数目
        this.currentPage = Number(myGoodsList.data.current_page);
        console.log(this.currentPage);
      } else if (myGoodsList.data.State.Code == 2005) {
        this.goodsList = [];
      }
    },
    //获取品牌规格种类
    async getbrand() {
      let id = this.$route.params.id;
      console.log(id);
      let mybrand = await this.$http({
        method: "get",
        url: "/api/index/web/getBrandsAndSkus",
        params: {
          id
        }
      });
      this.brands = mybrand.data.data.brands;
      this.skus = mybrand.data.data.skus;
      console.log(mybrand.data.data.brands, mybrand.data.data.skus, 312313131);
    },
    //选择规格发生变化
    async changecheck(name, arr, page = 1) {
      (this.getarr = arr), (this.getname = name);
      console.log(this.getarr, this.getname);
      console.log("))))))))))))))))))))))))", name, arr);

      console.log("双向绑定的值", this.checkList);

      let id = this.$route.params.id;
      let brand_code = this.active2;
      if (this.checkList.length === 0) {
        console.log("选择规格为空");
        this.param = null;

        console.log(this.param);
        await this.$http({
          method: "post",
          url: "/api/index/api/GoodsByBrandAndSpec",
          data: {
            id,
            page,
            param: this.param,
            brand_code
          }
        }).then(res => {
          console.log(res.data);
          let goodsList = [];

          this.goodsList = res.data.data;
          this.total = res.data.total; // 总页数
          this.pageSize = res.data.per_page; // 每页显示数目
          this.currentPage = res.data.current_page;
        });
      } else {
        console.log("选择规格不为空");

        // flagArr.includes(ele)
        // flagArr 数组中是否包含 ele 这项内容  如果包含 ? true ：false

        const flagArr = arr.map(item => {
          return item.name;
        });
        let goods_spec = [];
        this.checkList.forEach(ele => {
          flagArr.includes(ele) && goods_spec.push(ele);
          // 短路语句
        });

        let tempArr = { goods_spec, name };
        console.log(tempArr);
        console.log(this.checkLists);
        if (this.checkLists) {
          // 数组不为空
        let flag = this.checkLists.findIndex(function(value, index, arr) {
            console.log(value, index, arr);
            return value["name"] == name;
          });
          console.log(flag);
          if (flag == -1) {
            //新增加的组中操作
            this.checkLists.push(tempArr);
            console.log(this.checkLists);
          } else {
            // console.log(this.checkList.length)
            // 相同说明在同一个组操作 flag为数组下标
            if (this.checkList.length) {
              // 说明此组中 check不为0
              this.checkLists.splice(flag, 1, tempArr);
            } else {
              // check为0的情况下 只删除不添加
              this.checkLists.splice(flag, 1);
            }
          }
        } else {
          // 数组为空
          this.checkLists.push(tempArr);
        }
        console.log(this.checkLists);
        await this.$http({
          method: "post",
          url: "/api/index/api/GoodsByBrandAndSpec",
          data: {
            id,
            page,
            param: this.checkLists,
            brand_code
          }
        }).then(res => {
          console.log(res.data);
          if (res.data.State.Code == 200) {
            let goodsList = [];

            this.goodsList = res.data.data;
            this.total = res.data.total; // 总页数
            this.pageSize = res.data.per_page; // 每页显示数目
            this.currentPage = res.data.current_page;
          } else if (res.data.State.Code == 2005) {
            this.goodsList = [];
            console.log(res.data);
          }
        });
      }
    },
    //清除全部
    clear() {
      this.active2 = null;
      this.checkList = [];
      this.param = {};
      this.goodsListInit();
    },
    //清除品牌信息
    clearbrandlist() {
      this.active2 = null;
      this.changeitem = null;
      this.brandbtn(this.changeitem);
    },
    //清除规格信息
    clearlist() {
      this.checkList = [];
      this.checkLists = [];
      this.changecheck();
    }
  },
  components: {
    navigationRecord
  },
  created() {
    this.getbrand();
    this.goodsListInit();
  },
  watch: {
    $route(to, from) {
      console.log(to.path);
      this.checkList = [];
      this.checkLists = [];
      this.goodsListInit();
      this.getbrand();
    }
  }
};
</script>
<style lang="scss" scoped>
.container {
  .w1200 {
    width: 1200px;
    margin: auto;
    .detailsRight {
      width: 1200px;
      border-top: 2px #dddddd solid;
      .w972 {
        width: 1200px;
        height: 10px;
        // margin-left: 16px;
        height: auto;
        .classify {
          width: 100%;
          // height: 100px;
          box-sizing: border-box;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          border: 1px solid #dcdfe6;
          margin-top: 5px;
          .brand {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            margin: 5px 10px 0 10px;
            div {
              width: 80px;
              height: 70px;
              margin: 10px 10px 0 10px;
              text-align: center;
              // background-color: pink;
              span {
                width: 80px;
                font-weight: 800;
              }
            }
            ul {
              width: 1100px;
              display: flex;
              flex-direction: row;
              justify-content: flex-start;
              flex-wrap: wrap;
              margin-top: 5px;
              margin-bottom: 5px;
              li {
                margin: 0 20px;
                .el-button {
                  color: #333;
                  font-weight: normal;

                  &:hover {
                    color: #409eff;
                  }
                }
                .active2 {
                  background-color: #ecf5ff;
                  border: 1px solid #b3d8ff;
                  color: #409eff;
                }
                .active3 {
                  background-color: #ecf5ff;
                  border: 1px solid #b3d8ff;
                  color: #409eff;
                }
              }
            }
          }
        }
        .seachdetail {
          width: 1200px;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          .seachdetail-left {
            width: 200px;
            // height: 1000px;
            // background-color: pink;
            border-left: 1px solid #dcdfe6;
            border-bottom: 1px solid #dcdfe6;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            .seachdetail-left-title {
              height: 49px;
              background-color: #fff;
              color: #666;
              display: flex;
              flex-direction: row;
              justify-content: space-between;
              align-items: center;
              span {
                margin: 0 0 0 5px;
              }
              .el-button {
                margin: 0 5px 0 0;
              }
            }
            .seachdetail-left-list {
              flex: 1;
              display: flex;
              flex-direction: column;
              justify-content: flex-start;
              // background-color: red;
              .el-collapse-item {
                padding-left: 5px;
              }
            }
          }
          .seachdetail-right {
            width: 1000px;
            // height: 1600px;
            position: relative;
            border-left: 1px solid #dcdfe6;
            border-right: 1px solid #dcdfe6;
            // background-color: red;
            .seachdetail-right-top {
              height: 49px;
              background-color: #fff;
              // margin-left: 8px;
              display: flex;
              flex-direction: row;
              justify-content: space-between;
              align-items: center;
              .el-button {
                margin: 0 10px;
              }
              span {
                margin: 0 10px;
              }
            }
            ol {
              display: flex;
              flex-direction: row;
              flex-wrap: wrap;
              justify-content: flex-start;
              li {
                box-sizing: border-box;
                width: 180px;
                height: 270px;
                margin: 15px 30px 15px 35px;
                text-align: center;
                font-size: 16px;
                border: 1px solid rgba(240, 240, 240, 0.61);
                transition: all 0.4s ease-in-out;
                padding-bottom: 10px;
                cursor: pointer;
                &:hover {
                  box-shadow: 0px 4px 10px rgba($color: #000000, $alpha: 0.15);
                  border: 3px solid #409eff;
                }
                img {
                  width: 140px;
                  height: 140px;
                  margin: 20px 20px;
                }
                p {
                  padding: 0 10px;
                  font-size: 14px;
                  color: #333;
                  line-height: 30px;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  min-height: 30px;
                }
                div {
                  display: flex;
                  flex-direction: row;
                  justify-content: space-around;
                  font-size: 16px;
                  span {
                    color: #f40;
                  }
                  del {
                    color: #ccc;
                  }
                }
                bdi {
                  color: rgb(17, 17, 17);
                  font-size: 12px;
                  border: #ddd 1px solid;
                  padding: 2px 14px;
                }
              }
            }
            .el-table {
              text-align: center;
              margin-bottom: 5px;
              min-height: 1000px;
            }

            .el-pagination {
              text-align: center;
              // position: absolute;
              // bottom: 10px;
              // left: 35%;
            }
          }
        }
        .block {
          margin: 40px 0px 40px 216px;
        }
      }
    }
  }
}
/deep/ .el-table {
  thead {
    .cell {
      text-align: center; // table 表头 左对齐
      color: #333 !important;
      font-size: 14px;
    }
  }
  tbody {
    .cell {
      box-sizing: border-box;
      text-align: center;
      color: #333 !important;
      font-size: 14px;
    }
    tr:hover > td {
      border-top: 3px solid #409eff !important;
      border-bottom: 3px solid #409eff !important;

      // color: #fff;
    }
    tr:hover td:first-child {
      border-left: 3px solid #409eff !important;
    }
    tr:hover td:last-child {
      border-right: 3px solid #409eff !important;
    }
  }

  .delete-row {
    color: #d8d8d8;
  }

  .el-table__expand-icon {
    //修改 el-tabel 折叠按钮的位置
    float: right;
  }

  // 去掉table的border start----------------------------
  border: 0;
  th,
  tr,
  td {
    border: 0;
    background-color: #fff;
  }

  &::before {
    height: 0px;
  }
  &::after {
    width: 0;
  }

  .el-table__fixed:before {
    height: 0;
  }

  // 去掉table的border end----------------------------
}
/deep/ .el-collapse-item__header {
  color: #333;
  font-size: 14px;
  font-weight: normal;
}
</style>


